<template>
    <div id="big">
        <!-- 卡片 -->
        <el-card shadow="always">
            <div class="top_big">
                 <div>{{obj.product_name}}</div>
                 <ul>
                     <li>概述</li>
                     <li>参数</li>
                     <li>用户评价</li>
                 </ul>
            </div>
    </el-card>
        <!-- 卡片 -->

        <!-- 左侧轮播图 -->
        <div class="left">
           <el-carousel   style="width:100%;height:530px;">
    <el-carousel-item v-for="(item,index) in lbtarr" :key="index" style="width:100%;height:530px;">
        <div style="width:100%;height:500px">
       <img :src="'http://106.15.179.105:3000/'+item.product_picture" style="width:100%;height:100%">
        </div>
    </el-carousel-item>
  </el-carousel>
        </div>
        <!-- 左侧轮播图 -->



    <!-- 右侧数据 -->
<div class="right">
    <h1>{{obj.product_name}}</h1>
    <p style="color:grey;font-size:14px;margin-top:10px;height:50px">{{obj.product_intro}}</p>
    <div style="color:#ff6700">小米自营</div>
    <div style="font-size:20px;margin-top:10px;border-bottom:1px solid grey;height:35px">
        <span style="color:#ff6700">{{obj.product_selling_price}}元</span>&emsp;
        <s style="color:gray" v-if="obj.product_selling_price!==obj.product_price">{{obj.product_price}}元</s>
    </div>
    <div style="background-color:#ddd;width:100%;height:200px;margin-top:30px">
       <div style="width:50%;height:100%;float:left;">
           <p style="text-align: center;margin-top:60px">{{obj.product_name}}</p>
           <div style="text-align:center;font-size:28px;margin-top:30px;color:#ff7600">总计：{{obj.product_selling_price}}元</div>
       </div>
       <div style="width:50%;height:100%;float:right;">
           <div style="margin-top:66px;text-align:right;margin-right:66px">
               <span style="color:grey">{{obj.product_selling_price}}元</span>&emsp;
               <s style="color:grey">{{obj.product_price}}元</s>
           </div>
       </div>
       <div>
           <el-button type="warning" class="but_jrgwc" @click="caeradd(obj.product_id)">加入购物车</el-button>
           <el-button type="info" class="but_xh" @click="xqsc(obj.product_id)">喜欢</el-button>
       </div>

       <ul class="sm_ul">
           <li>
               <van-icon name="certificate" />
               小米自营
           </li>
           <li>
               <van-icon name="certificate" />
               小米发货
           </li>
           <li>
               <van-icon name="certificate" />
               7天无理由退货
           </li>
           <li>
               <van-icon name="certificate" />
               7天价格保护
           </li>
       </ul>








    </div>
</div>
    <!-- 右侧数据 -->











        
        
    </div>
</template>

<script>
export default {
    data() {
        return {
            obj:{},
            lbtarr:[]
        };
    },

    mounted() {
      
    
    },
created() {
    this.add();
},
    methods: {
       async add(){
           let id =this.$route.query.id
        //    console.log(id,"888")
let res = await this.$axios.post("api/product/getDetails",{productID:id})
console.log(res,"数据")
this.obj=res.data.Product[0]
let {data}=await this.$axios.post("api/product/getDetailsPicture",{productID: id})
console.log(data,"lbt");
this.lbtarr=data.ProductPicture
        },
        //收藏
       async xqsc(product_id){
           let user_id=this.$store.state.user_id
           let {data}=await this.$axios.post("api/user/collect/addCollect",{user_id: user_id, product_id: product_id})
            // console.log(data)
             this.$message({
          showClose: true,
          message: data.msg,
          type: 'success'
        });
        },
        //加入购物车
         async caeradd(product_id){
           let user_id=this.$store.state.user_id
           let {data}=await this.$axios.post("api/user/shoppingCart/addShoppingCart",{user_id: user_id, product_id: product_id})
            // console.log(data)
             this.$message({
          showClose: true,
          message: data.msg,
          type: 'success'
        });
        this.$router.push("/cart")
        },
    },
};
</script>

<style scoped>
#big{
    width: 100%;
    height: 600px;
}
.top_big{
    width: 100%;
    height: 30px;
    line-height: 30px;
}
.top_big>div{
float: left;
}
.top_big>ul{
    float: right;
    display: flex;
    width: 200px;
    /* background-color: pink; */
    text-align: center;
    margin-right: 80px;
}
.top_big>ul>li:nth-child(1){
     width: 25%;
}
.top_big>ul>li:nth-child(1):hover{
     border-bottom: 2px solid #ff6700;
     cursor: pointer;
     color: #ff6700;
}
.top_big>ul>li:nth-child(2){
     width: 25%;
     margin-left: 20px;
}
.top_big>ul>li:nth-child(2):hover{
     border-bottom: 2px solid #ff6700;
     cursor: pointer;
     color: #ff6700;
}
.top_big>ul>li:nth-child(3){
     width: 50%;
     margin-left: 20px;
}
.top_big>ul>li:nth-child(3):hover{
     border-bottom: 2px solid #ff6700;
     cursor: pointer;
     color: #ff6700;
}
.left{
    width: 35%;
    height: 88%;
    float: left;
    background-color: #3b3b3b;
}
.right{
    width: 65%;
    height: 88%;
    float: right;
    background-color: #fff;
    padding-top: 20px;
    padding-left: 20px;
    box-sizing: border-box;
}
.but_jrgwc{
    width: 300px;
    height: 50px;
    margin-top: 10px;
    margin-left: 50px;
    background-color: #ff7600;
}
.but_jrgwc:hover{
    background-color: #ff3066;
}
.but_xh{
    width: 200px;
    height: 50px;
    margin-top: 10px;
    margin-left: 80px;
}
.sm_ul{
    width: 100%;
    height: 52px;
    line-height: 65px;
    text-align: center;
    /* background-color: pink; */
    display: flex;
    color: gray;
}
.sm_ul>li{
    width: 20%;
}
</style>